<template>
    <div class="app-container app-padding login">
        <div class="header">
            <div class="logo" style="padding-top: 0;">
                <img src="https://www.aiaabiok.com/ag.png" alt="" />
            </div>
            <h2 class="welcome" style="padding: 0;">欢迎来到AG量化</h2>
            <!-- <van-row>
        <van-col span="6"><span class="btn-padding"  @click="$router.replace('/login')">立即登录</span></van-col>
        <van-col span="6"><span class="btn-padding text-bottom-activity">注册</span></van-col>
      </van-row> -->
        </div>

        <van-form @submit="onSubmit">
            <van-field v-model="note" name="note" placeholder="请填写微信名" autocomplete="off"
                :rules="[{ required: true, message: '请填写微信名' }]" />
            <van-field v-model="email" name="userName" placeholder="手机号" autocomplete="off"
                :rules="[{ required: true, message: '请填写手机号' }]" />
            <van-field v-model="code" name="code" type="digit" placeholder="验证码" autocomplete="off"
                :rules="[{ required: true, message: '请填写验证码' }]">
                <template #button>
                    <van-button @click="onGetVerifyCode" :disabled="codeGetDisable" :loading="codeGetLoading"
                        class="empty-background text-color-light" size="small" type="success">
                        {{ getCodeShow }}
                    </van-button>
                </template>
            </van-field>
            <van-field v-model="password" type="password" name="password" placeholder="设置密码" :rules="[
                { required: true, message: '请填写密码,至少8位包括数字和大小写字母' },
            ]" />
            <van-field v-model="password2" type="password" name="password2" placeholder="再次设置密码"
                :rules="[{ required: true, message: '请再次填写密码' }]" />
            <van-field v-model="inviteCode" name="inviteCode" placeholder="邀请码可以不写" autocomplete="off"
                :rules="[{ required: false, message: '邀请码非必填' }]" />
            <div class="login-remark">
                <div class="agree">
                    <van-checkbox v-model="checked">我已阅读 &nbsp;
                        <span class="text-color-fouse" @click="$router.push('/content?type=user')">用户手册</span>
                        &nbsp;和 &nbsp;<span class="text-color-fouse"
                            @click="$router.push('/content?type=private')">隐私政策</span></van-checkbox>
                </div>
            </div>
            <div class="login-class">
                <van-button block type="primary" native-type="submit">注册</van-button>
            </div>
            <div class="register">
                有账户?<span class="text-color-light" @click="$router.replace('/login')">直接登录</span>
            </div>
        </van-form>
    </div>
</template>

<script>
import { getEmailCode, register } from '@/api/login';
import { showToast, showSuccessToast } from 'vant';

export default {
    name: 'Register',
    data() {
        return {
            note: '',
            inviteCode: '',
            email: '',
            password: '',
            password2: '',
            code: '',
            loading: false,
            codeGetLoading: false,
            codeGetDisable: false,
            countDown: 60,
            getCodeShow: '获取验证码',
            checked: '',
        };
    },
    created() { 
        this.inviteCode = this.$route.query.inviteCode || '';
    },
    methods: {
        onGetVerifyCode() {
            if (this.codeGetLoading) {
                return;
            }
            if (!this.email) {
                showToast('请填写邮箱号或手机号');
                return;
            }
            this.codeGetLoading = true;
            const that = this;
            let countDown = () => {
                that.countDown -= 1;
                if (that.countDown > 0) {
                    that.$nextTick(() => {
                        that.getCodeShow = that.countDown;
                    });
                    setTimeout(countDown, 1000);
                } else {
                    this.codeGetDisable = false;
                    that.$nextTick(() => {
                        that.getCodeShow = '获取验证码';
                    });
                }
            };
            getEmailCode(this.email, 'register')
                .then(() => {
                    this.codeGetLoading = false;
                    this.codeGetDisable = true;
                    this.countDown = 61;
                    countDown();
                })
                .catch((err) => {
                    showToast(err);
                    this.codeGetLoading = false;
                });
        },
        onSubmit() {
            if (!this.checked) {
                showToast('请同意用户手冊和隐私政策');
                return;
            }
            if (!this.email) {
                showToast('请填写手机号');
                return;
            }
            if (!this.code) {
                showToast('请填写验证码');
                return;
            }
            if (!this.password) {
                showToast('请填写密码,至少8位包括数字和大小写字母');
                return;
            }
            if (this.password != this.password2) {
                showToast('两次密码输入不一致');
                return;
            }

            this.loading = true;
            register({
                email: this.email,
                password: this.password,
                code: this.code,
                inviteCode: this.inviteCode,
                note: this.note || ''
            })
                .then(() => {
                    this.loading = false;
                    this.$router.replace({ path: '/login' }).catch(() => { });
                    showSuccessToast(this.$t('恭喜您注册成功'));
                })
                .catch((e) => {
                    showToast(e);
                    this.loading = false;
                });
        },
        onLangChange() {
            if (!this.codeGetLoading) {
                this.getCodeShow = '获取验证码';
            }
        },
    },
};
</script>
